import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/data/request/application_request.dart';
import 'package:bxultimate/domain/application/examination/ExaminationAnswerCard.dart';
import 'package:bxultimate/domain/common/app_single_option.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:bxultimate/widgets/mk_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marquee/marquee.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class ExaminationAnswerCardResultPage extends StatefulWidget {
  const ExaminationAnswerCardResultPage({Key? key}) : super(key: key);

  @override
  State<ExaminationAnswerCardResultPage> createState() => _ExaminationAnswerCardResultPageState();
}

class _ExaminationAnswerCardResultPageState extends State<ExaminationAnswerCardResultPage> {
  final controller = Get.find<ExaminationAnswerCardResultController>();
  final state = Get.find<ExaminationAnswerCardResultController>().state;
  @override
  Widget build(BuildContext context) {
    return MkPage(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: TDNavBar(
          backgroundColor: Colors.transparent,
          title: "考试结果",
        ),
        body: MkScrollView(
          bottomButton: Row(
            children: [
              Expanded(
                child: TDButton(
                  isBlock: true,
                  theme: TDButtonTheme.light,
                  text: '上一题',
                  shape: TDButtonShape.circle,
                  height: 48,
                  onTap: controller.prev,
                ),
              ),
              Expanded(
                child: TDButton(
                  isBlock: true,
                  theme: TDButtonTheme.primary,
                  text: '下一题',
                  shape: TDButtonShape.circle,
                  height: 48,
                  onTap:controller.next,
                ),
              )
            ],
          ),
          children: [Obx(() => _buildBody())],
        ),
      ),
    );
  }

  _buildBody() {
    return Padding(
        padding: EdgeInsets.symmetric(horizontal: AppTheme.iDefaultPadding),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Gaps.vGap16,
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TDButton(
                  text: '答题卡(共${state.examinationJoinDto.sum}题)',
                  theme: TDButtonTheme.primary,
                  size: TDButtonSize.small,
                  onTap: () {
                    _showCard();
                  },
                ),

              ],
            ),
            Gaps.vGap24,
            Text(
              "${state.question.title}",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            Gaps.vGap24,

            // 填空
            state.question.titleType == 3
                ? TDInput(
              controller: controller.inputController,
              backgroundColor: Colors.white,
              hintText: '请填写',
            )
                : SizedBox(),

            // 单选
            state.question.titleType == 1
                ? _buildRadio()
                : SizedBox(),

            // 多选
            state.question.titleType == 2
                ? _buildCheckBox()
                : SizedBox(),

            Gaps.vGap12,

            Text('正确答案',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,color: Colors.redAccent)),
            Gaps.vGap12,
            Text('${state.question.rightAnswer}')
          ],
        ));
  }

  _buildRadio() {
    var dataList = <AppSingleOption>[];
    for (var key in state.question.answerToBeSelected!.keys) {
      dataList.add(AppSingleOption(
          value: key, label: state.question.answerToBeSelected![key]));
    }

    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: TDRadioGroup(
        selectId: controller.radioSelected,
        onRadioGroupChange: (value) {
          controller.radioSelected = value!;
        },
        child: ListView.builder(
          padding: const EdgeInsets.all(0),
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {
            return TDRadio(
              id: dataList[index].value,
              title: dataList[index].label,
              titleMaxLine: 2,
              subTitleMaxLine: 2,
            );
          },
          itemCount: dataList.length,
        ),
      ),
    );
  }

  _buildCheckBox() {
    var dataList = <AppSingleOption>[];
    for (var key in state.question.answerToBeSelected!.keys) {
      dataList.add(AppSingleOption(
          value: key, label: state.question.answerToBeSelected![key]));
    }

    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: TDCheckboxGroupContainer(
        selectIds: controller.checkBoxSelected,
        onCheckBoxGroupChange: (value) {
          controller.checkBoxSelected = value;
        },
        child: ListView.builder(
          padding: const EdgeInsets.all(0),
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {
            return TDCheckbox(
              id: dataList[index].value,
              title: dataList[index].label,
              titleMaxLine: 2,
              subTitleMaxLine: 2,
            );
          },
          itemCount: dataList.length,
        ),
      ),
    );
  }

  _showCard() async{

    List<ExaminationAnswerCard> card = await ApplicationRequest.getExamDtk(controller.examId);

    Navigator.of(context).push(TDSlidePopupRoute(
        modalBarrierColor: TDTheme.of(context).fontGyColor2,
        slideTransitionFrom: SlideTransitionFrom.bottom,
        builder: (context) {
          return TDPopupBottomDisplayPanel(
            title: '答题卡',
            child: Container(
              height: 500,
              child: SingleChildScrollView(
                child: Padding(
                  padding: EdgeInsets.only(
                      left: AppTheme.iDefaultPadding,
                      right: AppTheme.iDefaultPadding,
                      bottom: 40),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "${state.examinationJoinDto.examTitle}",
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.bold),
                      ),
                      Gaps.vGap8,
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Gaps.hGap12,
                          _buildCircle(Colors.white),
                          Gaps.hGap4,
                          Text("未作答"),
                          Gaps.hGap12,
                          _buildCircle(AppTheme.primaryColor),
                          Gaps.hGap4,
                          Text("已作答")
                        ],
                      ),
                      Gaps.vGap12,
                      Wrap(
                        spacing: 6,
                        runSpacing: 6,
                        children: [
                          for (int i = 0; i < card.length; i++)
                            GestureDetector(
                              onTap: (){
                                controller.redirectQuestion(card[i].id);
                              },
                              child: Container(
                                  width: 40,
                                  height: 40,
                                  decoration: BoxDecoration(
                                      border: Border.all(),
                                      color: card[i].isFillout! ? AppTheme.primaryColor : Colors.white ,
                                      borderRadius: BorderRadius.circular(50)),
                                  child: Center(
                                    child: Text('${i + 1}'),
                                  )),
                            ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
        }));
  }

  _buildCircle(color) {
    return Container(
      width: 10,
      height: 10,
      decoration: BoxDecoration(
        border: Border.all(),
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<ExaminationAnswerCardResultController>();
    super.dispose();
  }
}